<template>
	<view>
		<view class="uni-form-item uni-column">
		  <view class="title" v-if="labelList">选择缴费批次</view>
		</view>
		<wlCheckbox :labelList='labelList' @checkedValue='checkedValue'>	
		</wlCheckbox>
		<view class="uni-padding-wrap uni-common-mt">
		  <button type="primary" @click="query">生成订单</button>
		</view>
		<view class="box"  @click="pay" v-if="housList">
			<view class="shuangb">
				<text>缴费项目: {{housList.item}}</text>
				<text v-if="housList.number">缴费月份: {{housList.number}}</text>
				<text v-if="housList.area">面积: {{housList.area}}</text>
			</view>
			<view class="name" v-if="housList.beatch">缴费批次: {{housList.beatch}}</view>
			<view class="name">总价: {{housList.sum}}</view>
			<view v-if="housList.charge">额外收费: {{housList.charge}}</view>
			<view class="shuangb"><text>单价: {{housList.price}}</text></view>
			<view>小区: {{housList.messagea}}</view>
			<view class="cent"><text class="bdfw">去支付</text></view>
		</view>
	</view>
</template>

<script>
	import wlCheckbox from '@/components/wl-group/wl-checkbox.vue'
	export default {
		components: {
			wlCheckbox,
		},
		data() {
			return {
				labelList: [],
				housList: ''
			}
		},
		mounted() {
			this.getHouse();
		},
		methods: {
			getHouse() {
				let params = {
					houseId: uni.getStorageSync('payhouseId'),
					itemId: uni.getStorageSync('payItemId'),
				}
				this.$api.getItemBatchByCustomer(params).then((res) => {
					if (res.success) {
						if(res.rows.length == 0) {
							this.labelList = ''
							return
						}
						let zopt = []
						res.rows.map(item => {
							console.log(item.type)
							if (item.type == 0) {
								let opt = {
									value: String(item.id),
									checked: false,
									name: item.batch_name
								}
								zopt.push(opt)
							}
						})
						this.labelList = zopt
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			checkedValue(item) {
				this.itemBatchId = item
			},
			query() {
				if (uni.getStorageSync('payItembatch') == 1) {
					if (this.itemBatchId == undefined || this.itemBatchId.length == 0) {
						uni.showToast({
							icon: 'none',
							title: "请先选择批次",
							duration: 1000
						});
						return
					}
				}
				let params = {
					houseId: uni.getStorageSync('payhouseId'),
					itemId: uni.getStorageSync('payItemId'),
					itemBatchId: this.itemBatchId || ''
				}
				this.$api.getPrice(params).then((res) => {
					if (res.success) {
						this.housList = res.rows
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 1000
						});
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			pay() {
				let params = {
					customerId: uni.getStorageSync('user').roleId,
					houseId: uni.getStorageSync('payhouseId'),
					itemId: uni.getStorageSync('payItemId'),
					itemBatchId: this.itemBatchId || ''
				}
				this.$api.pay(params).then((res) => {
					if (res.success) {
						window.location.href = res.rows
					} else {
						if (res.msg == '已创建订单,请点击重新支付!') {
							window.location.href = res.rows
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
								duration: 1000
							});
						}
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		background: #F8F8FF;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		line-height: 24px;
	}
	.name {
		font-weight: bold;
		font-size: 16px;
	}
	.shuangb {
		display: flex;
		justify-content: space-between;
	}
	.cent {
		display: flex;
		justify-content: center;
	}
	.bdfw {
		background: #007AFF;
		display: block;
		width: 100px;
		text-align: center;
		border-radius: 10px;
		color: #fff;
	}
</style>
